<template>
    <div class="header_box">
        <div>
            <h1>TODOLIST</h1>
        </div>
        <div>
            <input v-model="value" type="text" @keyup.13='send'>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            value:'',
        }
    },
    methods:{
        send(){
            if(this.value.trim().length===0) return false;
            //1.发送给父组件
            this.$emit('getHeader',this.value);
            //2.清空value
            this.value='';
        }
    }
}
</script>
<!-- scoped作用域，让样式只在当前的vue组件里生效 -->
<style scoped>
*{margin: 0;padding: 0;}
.header_box{
    display: flex;
    justify-content: space-evenly;
}
h1{
    color: #ffffff;
}
div{
    background: rgba(47,47,47,0.98);
}
input{
    margin-top: 2px;
    width: 270px;
    height: 40px;
    font-size: 24px;
    border-radius: 8px;
}
</style>